<!--
 * @Author: your name
 * @Date: 2023-08-15 21:52:09
 * @LastEditTime: 2023-08-16 23:55:04
 * @LastEditors: your name
 * @Description: 
-->
<template>
  <div class="screen-left-3">
    <!-- <dv-capsule-chart :config="config" /> -->
    <!-- <dv-charts :option="option" /> -->
    <div class="chart-bar" ref="chartRef" style="height: 20vh">\</div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: null,
    };
  },
  created() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.chartRef);

      let option = {
        grid: {
          left: "4%",
          right: "4%",
          bottom: "10%",
          top: "10%",
          containLabel: true,
        },
        legend: {
          show: false,
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          type: "category",
          data: ["吊装", "动火", "动土", "断路", "高空", "用水", "用电"],
          axisLabel: {
            // show: true,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "rgba(255, 255, 255, 1)",
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "流程管理",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss">
.screen-left-3 {
  width: 100%;
  // height: 100%;
  padding: 8vh 1vh 1vh;
  box-sizing: border-box;
  .chart-bar {
    width: 90%;
    height: 20vh;
    margin: 0 auto;
    // height: 100%;
  }
}
</style>